<template>
  <div>
    <div class="search">
      <form action="" onsubmit="return false">
        <mt-search v-model="listParam.query" placeholder="货号/商品名称" @keyup.enter.native="search"></mt-search>
      </form>
      <div class="hot">
        <h3>热门搜索</h3>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
      </div>
      <div class="hot">
        <h3>热门搜索</h3>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
      </div>
      <div class="hot">
        <h3>热门搜索</h3>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
        <a href="#">跑步鞋</a>
      </div>
    </div>
    <footertab></footertab>
  </div>
</template>
<script>
import footertab from '@/components/footer/footer'
import { Toast } from 'mint-ui'
export default {
  data() {
    return {
      defaultResult: [
        'Apple',
        'Banana',
        'Orange',
        'Durian',
        'Lemon',
        'Peach',
        'Cherry',
        'Berry',
        'Core',
        'Fig',
        'Haw',
        'Melon',
        'Plum',
        'Pear',
        'Peanut',
        'Other'
      ],
      listParam: {
        query: '',
        sbar: '',
        p: '',
        brand: '',
        style: '',
        sex: '',
        y: '',
        s: '',
        price: '',
        num: '',
        stock: 1,
        type: 0,
        img: 1,
        series: '',
        crowd: '',
        firstStyle: ''
      }
    }
  },
  watch: {},
  components: {
    footertab
  },
  computed: {
    // filterResult() {
    //   return this.defaultResult.filter(value => new RegExp(this.value, 'i').test(value))
    // },
  },
  methods: {
    search() {
      if (this.listParam.query) {
        this.$router.push({ path: 'goodsList', query: { query: this.listParam.query } })
      } else {
        Toast('请输入搜索内容')
      }
    }
  }
}

</script>
<style lang="scss">
@import '~assets/common/css/mixin.scss';
input::-webkit-input-placeholder {
  color: #CECECE;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #CECECE;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #CECECE;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #CECECE;
}

.search {
  padding-bottom: 1.35rem;
  min-height: 100vh;
  .mint-search {
    height: 44px;
  }
  .mint-searchbar {
    background-color: #262626;
  }

  .mint-searchbar-inner {
    background-color: #626262;
  }

  .mint-searchbar-core {
    background-color: #626262;
    padding-left: 10px;
    color: #CECECE;
  }

  .mint-searchbar-inner .mintui-search {
    color: #FFF;
  }
  .mint-searchbar-cancel {
    color: #FFF;
  }
  .mint-cell {
    background-color: #636363;
    border-bottom: 1px solid #898989;
    opacity: 0.95;
    color: #FFF;
  }
  .hot {
    padding: 0 15px;
    overflow: hidden;
  }
  .hot h3 {
    font-weight: 700;
    margin-top: 25px;
  }
  .hot a {
    float: left;
    padding: 6px 10px;
    color: #979797;
    border: 1px solid #979797;
    border-radius: 5px;
    display: inline-block;
    margin-top: 10px;
    margin-right: 10px;
  }
}
</style>
